const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const WebpackBarPlugin = require('webpackbar')
const path = require('path')

const resolve = (s) => path.resolve(__dirname, s)

module.exports = {
  entry: resolve('src/main.js'),

  output: {
    filename: 'bundle.js',
    path: resolve('dist'),
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          cacheDirectory: true,
          presets: ['@babel/preset-env'],
          plugins: [['@vue/babel-plugin-jsx', { mergeProps: false }]],
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },

  resolve: {
    extensions: ['.js', '.jsx', '.vue'],
  },

  plugins: [
    new WebpackBarPlugin(),
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: resolve('public/index.html'),
    }),
    new VueLoaderPlugin(),
  ],

  devServer: {
    contentBase: resolve('public'),
    quiet: true,
  },
}
